<template>
  <div id="detail">
    <van-nav-bar class="header"
                 fixed
                 @click-left="goback"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">评价详情</div>
    </van-nav-bar>
    <div class="main">
      <!-- 对象 -->
      <person-card :userName="userName"
                   @show_preview="show_preview(0)"
                   :userPictorUrl="userPictorUrl"></person-card>
      <!-- 内容 -->
      <content-card :content="content"></content-card>
      <!-- 凭证 -->
      <pic-card :imgList="imgList"
                @show_preview="show_preview1"
                v-if="imgList.length>0"></pic-card>
      <div class="btn bgprimary wordsWrite fz5"
           @click="go_reply"
           :style="{opacity: isReply ? .5 : 1}">回复</div>
    </div>
    <van-image-preview v-model="showPreview"
                       :images="images"
                       :startPosition="index"
                       @change="onChange">
    </van-image-preview>
  </div>
</template>
<script>
import personCard from "@/components/performance/orderCenter/assess/detail/personCard";
import picCard from "@/components/performance/orderCenter/assess/detail/picCard";
import contentCard from "@/components/performance/orderCenter/assess/detail/contentCard";
import { getuserUid } from "@/utils/auth";
export default {
  data() {
    return {
      userName: "", //姓名
      userPictorUrl: "", //头像
      content: "",
      imgList: [],
      // orderUid: this.$route.params.uid
      orderUid: "",
      isReply: false,
      showPreview: false,
      images: [],
      index: 0
    };
  },
  components: {
    personCard,
    picCard,
    contentCard
  },
  created() {
    this.orderUid = this.$route.query.uid;
    this.getOrderReviewInfo();
  },
  methods: {
    goback() {
      this.$router.push("/performance/orderCenter");
    },
    show_preview(index) {
      this.images = [];
      this.images.push(this.userPictorUrl);
      this.showPreview = true;
      this.index = index;
    },
    show_preview1(index) {
      this.images = [];
      for (let i of this.imgList) {
        this.images.push(i.imageUrl);
      }
      this.showPreview = true;
      this.index = index;
    },
    onChange(index) {
      this.index = index;
    },
    //评价信息
    async getOrderReviewInfo() {
      const e = await HTTP("getOrderReviewInfo", {
        orderUid: this.orderUid
      });
      if (e.code == 200) {
        let info = e.data;
        let reviewInfo = info.reviewInfo;
        let revieweReplyInfo = info.revieweReplyInfo;
        this.userName = reviewInfo.userName;
        this.userPictorUrl = reviewInfo.userPictorUrl;
        this.content = reviewInfo.content;
        this.imgList = reviewInfo.reviewImgInfoList;
        this.isReply = Boolean(revieweReplyInfo);
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    go_reply() {
      if (this.isReply) {
        return;
      }
      this.$router.push({
        name: "performance-reply",
        params: { orderUid: this.orderUid }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#detail {
  .header {
    background: $color-primary;
    color: #ffffff;
    height: 0.92rem;
    .title {
      color: #ffffff;
    }
  }
  .main {
    margin-top: 0.92rem;
    padding: 0.2rem 0.24rem 0 0.24rem;
    .btn {
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 10px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 0.4rem;
    }
  }
}
</style>